<template>
  <div class="actUserDetailBox">
    <ElCard class="art-table-card" shadow="never">
      <div class="actUser-box">
        <el-row :gutter="24">
          <el-col :span="8">
            <div class="actUser-left">
              <div class="act-box">
                <el-descriptions title="活动信息" :column="1" :border="true" label-width="120px">
                  <el-descriptions-item label="活动名称">{{
                    actInfo.taskName
                  }}</el-descriptions-item>
                  <el-descriptions-item label="举办方">{{ actInfo.taskHold }}</el-descriptions-item>
                  <el-descriptions-item label="联系电话">{{
                    actInfo.taskLinkUserPhone
                  }}</el-descriptions-item>
                  <el-descriptions-item label="活动介绍">
                    {{ actInfo.taskInfo }}
                  </el-descriptions-item>
                  <el-descriptions-item label="活动地址">
                    {{ actInfo.taskAddress }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </el-col>
          <el-col :span="15">
            <div class="actUser-right">
              <div class="act-user-box">
                <el-descriptions title="用户信息"></el-descriptions>
                <!-- 数据表格 -->
                <el-table :data="userInfoList" style="width: 100%">
                  <el-table-column prop="newUser.newName" label="姓名" width="120">
                    <template #default="scope">
                      {{ scope.row.newUser?.newName || '未知' }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="newGender" label="性别" width="120">
                    <template #default="scope">
                      {{ getGenderLabel(scope.row.newUser?.newGender) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="newIdentity" label="身份证" width="220">
                    <template #default="scope">
                      {{ scope.row.newUser?.newIdentity || '未知' }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="newPhone" label="联系电话" width="120">
                    <template #default="scope">
                      {{ scope.row.newUser?.newPhone || '未知' }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="joinSignFlag" label="是否签到">
                    <template #default="scope">
                      {{ getWhetherLabel(scope.row?.joinSignFlag) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="joinSignTime" label="签到时间" width="180">
                    <template #default="scope">
                      {{ formatTime(scope.row.joinSignTime) || '无' }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="joinTime" label="加入时间" width="180">
                    <template #default="scope">
                      {{ formatTime(scope.row.joinTime) || '无' }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="scoreNum" label="积分" width="120">
                    <template #default="scope">
                      {{ scope.row.newUser?.scoreNum }}
                    </template>
                  </el-table-column>

                  <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default="scope">
                      <el-button
                        link
                        type="primary"
                        size="small"
                        @click="handleAttendance(scope.row)"
                      >
                        签到
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </ElCard>
  </div>
</template>

<script setup lang="ts">
  import { useRoute } from 'vue-router'
  import { ElMessage, ElMessageBox } from 'element-plus'
  const route = useRoute()
  import { ref, onMounted, reactive } from 'vue'
  import {
    taskUserPageDataUsingPost,
    taskUserSignInUsingPost,
    taskInfoGetDataUsingPost,
    apiDictListByTypeUsingPost
  } from '@/api'
  onMounted(() => {
    const id = route.query.id
    if (id) {
      getUserList(id)
      getActInfo(id)
      getDictType()
    }
  })

  const userInfoList = ref<any[]>([])
  const actInfo = ref<any>({})
  const genderType = ref<any[]>([])
  const WhetherType = ref<any[]>([])
  const searchForm = reactive({
    current: 1,
    size: 10,
    taskId: ''
  })

  const formatTime = (timeStr) => {
    if (
      !timeStr ||
      typeof timeStr !== 'string' ||
      timeStr.length !== 14 ||
      !/^\d+$/.test(timeStr)
    ) {
      return null
    }

    // 截取各部分时间
    const year = '25' + timeStr.slice(2, 4)
    const month = timeStr.slice(4, 6)
    const day = timeStr.slice(6, 8)
    const hour = timeStr.slice(8, 10)
    const minute = timeStr.slice(10, 12)
    const second = timeStr.slice(12, 14)

    return `${year}-${month}-${day} ${hour}:${minute}:${second}`
  }

  const getActInfo = async (id) => {
    const res = await taskInfoGetDataUsingPost({
      body: {
        id: id
      }
    })
    actInfo.value = res
  }

  const handleAttendance = async (row) => {
    try {
      await ElMessageBox.confirm(`确定签到吗？`, '签到确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await taskUserSignInUsingPost({
        body: {
          userId: row.userId,
          taskId: row.taskId
        }
      })
      ElMessage.success('签到成功')
      getUserList()
    } catch {
      // 用户取消删除
    }
  }

  const getUserList = async (id) => {
    searchForm.taskId = id
    try {
      const res = await taskUserPageDataUsingPost({
        body: searchForm
      })
      userInfoList.value = res.list || []
    } catch (error) {
      console.error('获取用户列表失败:', error)
    }
  }

  const getDictType = async () => {
    const res = await apiDictListByTypeUsingPost({ body: [10000, 1] })
    genderType.value = res[0].dictDataList
    WhetherType.value = res[1].dictDataList
  }

  // 性别
  const getGenderLabel = (value) => {
    if (value) {
      const matched = genderType.value.find((item) => item.dictValue === Number(value))
      return matched ? matched.dictLabel : '未知'
    }
  }
  const getWhetherLabel = (value) => {
    if (value) {
      const matched = WhetherType.value.find((item) => item.dictValue === Number(value))
      return matched ? matched.dictLabel : '未知'
    }
  }
</script>

<style lang="scss" scoped>
  .actUserDetailBox {
    box-sizing: border-box;
    margin: auto;
  }
</style>
